<template>
    <div>
        <h1>户型列表</h1>
        户型名称:
        <input type="text" v-model="data.name">&nbsp;&nbsp;&nbsp;
        户型结构:
        <select v-model="data.tname">
            <option value="">请选择</option>
            <option :value="a.HTName" v-for="a in hh">{{ a.HTName }}</option>
        </select> &nbsp;&nbsp;&nbsp;
        <input type="button" value="查询" class="btn btn-primary" @click="show">
        <table border="1px" class="table table-bordered">
            <tbody>
                <tr>
                    <td>户型名称</td>
                    <td>户型结构</td>
                    <td>装修标准</td>
                    <td>建筑面积</td>
                    <td>套内面积</td>
                    <td>户型图</td>
                    <td>创建时间</td>
                    <td>操作</td>
                </tr>
                <tr v-for="a in info">
                    <td>{{ a.HName }}</td>
                    <td>{{ a.HTName }}</td>
                    <td>{{ a.Bzhun }}</td>
                    <td>{{ a.AllSize }}</td>
                    <td>{{ a.Size }}</td>
                    <td><a :href="a.Photo">查看</a></td>
                    <td>{{ a.CreateTime.substring(0, 10) }}</td>
                    <td>
                        <input type="button" value="删除" class="btn btn-danger" @click="del(a.Id)">
                        <input type="button" value="编辑" class="btn btn-success" @click="find(a.Id)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router'
import { log } from 'console';
const router = useRouter();
const route = useRoute();

onMounted(() => {
    bind();
    show();
})

let hh: any = reactive([])

let info: any = ref([])

let data: any = ref({
    name: '',
    tname: ''
})

//绑定
const bind = () => {
    axios({
        url: 'https://localhost:7010/api/House/Bind',
        method: 'get'
    })
        .then((res) => {
            Object.assign(hh, res.data);
        })
}

//显示
const show = () => {
    axios({
        url: 'https://localhost:7010/api/House/Show',
        method: 'get',
        params: data.value
    })
        .then((res) => {
            console.log(res.data);
            info.value = res.data;
        })
}

//逻辑删除
const del = (id:any) => {
    if(confirm('确认删除?'))
    axios({
        url: 'https://localhost:7010/api/House/del',
        method: 'delete',
        params:{
            id:id
        }
    })
        .then((res) => {
            if(res.data > 0){
                alert('删除成功!');
                show();
                return;
            }
            else{
                alert('删除失败!');
                return;
            }
        })
}

const find = (id:any) => {
    router.push({
        path:'/update',
        query:{
            id:id
        }
    })
}
</script>

<style scoped></style>